<template>
  <div class="sidebar">
    <div class="sidebar-wrapper" @mouseleave="hideSecondRouter()">
      <ul class="sidebar-products sidebar-list wst" @mouseover="hideSecondRouter()">
        <li class="product-item" :class="[{'active': ($route.name === route.routeName || $route.meta && $route.meta.name === route.routeName ), 'hover': hoverMenu == idx}]" v-for="(route, idx) in menuList" :key="idx" @click="navTo(route)" @mouseover.stop="showSecondRouter(route, idx, $event)">
          <span class="product-item-icon-box">
            <i class="icon" :class="[route.icon]"></i>
          </span>
          <span class="product-item-name">{{ route.name }}</span>
          <span class="product-item-more" v-if="route && route.children">
            <i class="iconfont icon-yousanjiao"></i>
          </span>
        </li>
      </ul>
      <ul class="sidebar-second sidebar-list" :class="[{'ss-show': secondList.length}]" @mouseleave="hideSecondRouter()">
        <li v-for="(item, idx2) in secondList" :key="idx2" @click="navTo(item)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      // 市级管理员权限
      cityRoles: [
        {
          name: '发布考试计划',
          icon: 'i-plan',
          routeName: 'examPlan'
        },
        {
          name: '考生信息管理',
          icon: 'i-examinee',
          routeName: 'infoManagement'
        },
        {
          name: '考场编排管理',
          icon: 'i-arrangement',
          routeName: 'examLayout'
        },
        {
          name: '成绩统计与发布',
          icon: 'i-score',
          routeName: 'gradeCount'
        },
        // {
        //   name: '视频管理',
        //   icon: 'i-video',
        //   routeName: ''
        // },
        {
          name: '机构管理',
          icon: 'i-org',
          routeName: 'orgManagement'
        },
        {
          name: '管理员管理',
          icon: 'i-user',
          routeName: 'adminManagement'
        },
        {
          name: '评卷老师管理',
          icon: 'i-teacher',
          routeName: 'evaluationManagement'
        },
        {
          name: '审核编排',
          icon: 'i-audit',
          routeName: 'examine'
        },
        {
          name: '考试数据统计',
          icon: 'i-stats',
          routeName: 'statsCity'
        }
      ],
      // 区县级管理员权限
      distRoles: [
        {
          name: '考生信息管理',
          icon: 'i-examinee',
          routeName: 'infoManagement'
        },
        {
          name: '考证管理',
          icon: 'i-document',
          routeName: 'document',
          children: [
            {
              name: '准考证管理',
              routeName: 'admissionTicket'
            },
            {
              name: '监考证管理',
              routeName: 'proctorTicket'
            }
          ]
        },
        {
          name: '考点考场管理',
          icon: 'i-venue',
          routeName: 'venue',
          children: [
            {
              name: '考点管理',
              routeName: 'examinationSite'
            },
            {
              name: '考场管理',
              routeName: 'examinationRoom'
            }
          ]
        },
        {
          name: '考场编排管理',
          icon: 'i-arrangement',
          routeName: 'arrangement',
          children: [
            {
              name: '顺序编排学校',
              routeName: 'sequenceSchool'
            },
            {
              name: '智能编排学校',
              routeName: 'smartSchool'
            }
          ]
        },
        {
          name: '成绩管理',
          icon: 'i-score',
          routeName: 'gradeCount'
        },
        // {
        //   name: '视频管理',
        //   icon: 'i-video',
        //   routeName: ''
        // },
        {
          name: '用户管理',
          icon: 'i-user',
          routeName: 'user',
          children: [
            {
              name: '管理员管理',
              routeName: 'adminUser'
            },
            {
              name: '监考工作人员管理',
              routeName: 'stafferInvigilater'
            },
            {
              name: '候考工作人员管理',
              routeName: 'stafferWait'
            }
          ]
        },
        {
          name: '考试数据统计',
          icon: 'i-stats',
          routeName: 'statsArea'
        }
      ],
      // 校级管理员权限
      schoolRoles: [
        {
          name: '考生信息管理',
          icon: 'i-examinee',
          routeName: 'schoolStudentInfo'
        },
        {
          name: '考场编排管理',
          icon: 'i-arrangement',
          routeName: 'sequenceSchool'
        },
        {
          name: '成绩管理',
          icon: 'i-score',
          routeName: 'gradeCount'
        },
        {
          name: '考试数据统计',
          icon: 'i-stats',
          routeName: 'statsPoint'
        }
      ],
      menuList: [],
      activeMenu: 0,
      hoverMenu: null,
      isCollapse: false,
      secondList: []
    }
  },
  created () {
    if (sessionStorage.getItem('userData') === 'undefine') {
      this.$message.error('无法获取用户角色！')
    } else {
      let obj = JSON.parse(sessionStorage.getItem('userData'))
      if (obj) {
        if (obj.roleKey === 'city') {
          this.menuList = this.cityRoles
        } else if (obj.roleKey === 'school') {
          this.menuList = this.schoolRoles
        } else {
          this.menuList = this.distRoles
        }
      } else {
        this.$router.push({ name: 'login' })
      }
    }
  },
  methods: {
    // 路由跳转
    navTo (route) {
      if (route && route.children) {
        console.log('无法跳转')
      } else if (route.routeName) {
        console.log('可以跳转')
        this.$router.push({ name: route.routeName })
      }
    },
    // 判断显示二级导航
    showSecondRouter (route, idx, e) {
      this.hoverMenu = idx
      if (route && route.children) {
        this.secondList = route.children
      } else {
        this.secondList = []
      }
    },
    hideSecondRouter () {
      this.hoverMenu = null
      this.secondList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar{
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  width: 50px;
  z-index: 1999!important;
  background-color: #252a2f;
  .sidebar-wrapper{
    height: 100%;
    position: absolute;
    z-index: 1900;
    width: 50px;
    top: 0;
    bottom: 0;
    background-color: #252a2f;
    -webkit-transition: all .3s cubic-bezier(0,0,.2,1);
    transition: all .3s cubic-bezier(0,0,.2,1);
    &:hover{
      cursor:pointer;
      width:240px;
    }
  }
  .sidebar-products {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    z-index: 900;
    background-color: #252a2f;
    .product-item {
      padding: 0;
      &.active{
        .product-item-name{
          color: #fff !important;
        }
        .i-examinee{
          background-image: url('../assets/img/sidebar/examinee.png') !important;
        }
        .i-document{
          background-image: url('../assets/img/sidebar/document.png') !important;
        }
        .i-venue{
          background-image: url('../assets/img/sidebar/venue.png') !important;
        }
        .i-arrangement{
          background-image: url('../assets/img/sidebar/exam.png') !important;
        }
        .i-score{
          background-image: url('../assets/img/sidebar/score.png') !important;
        }
        .i-video{
          background-image: url('../assets/img/sidebar/video.png') !important;
        }
        .i-user{
          background-image: url('../assets/img/sidebar/user.png') !important;
        }
        .i-teacher{
          background-image: url('../assets/img/sidebar/teacher.png') !important;
        }
        .i-plan{
          background-image: url('../assets/img/sidebar/plan.png') !important;
        }
        .i-org{
          background-image: url('../assets/img/sidebar/org.png') !important;
        }
        .i-stats{
          background-image: url('../assets/img/sidebar/stats.png') !important;
        }
        .i-audit{
          background-image: url('../assets/img/sidebar/audit.png') !important;
        }
      }
      &:hover,
      &.hover{
        .product-item-name{
          color: rgba(65,119,255,1);
        }
        .i-examinee{
          background-image: url('../assets/img/sidebar/examinee_active.png');
        }
        .i-document{
          background-image: url('../assets/img/sidebar/document_active.png');
        }
        .i-venue{
          background-image: url('../assets/img/sidebar/venue_active.png');
        }
        .i-arrangement{
          background-image: url('../assets/img/sidebar/arrangement_active.png');
        }
        .i-score{
          background-image: url('../assets/img/sidebar/score_active.png');
        }
        .i-video{
          background-image: url('../assets/img/sidebar/video_active.png');
        }
        .i-user{
          background-image: url('../assets/img/sidebar/user_active.png');
        }
        .i-teacher{
          background-image: url('../assets/img/sidebar/teacher_active.png');
        }
        .i-plan{
          background-image: url('../assets/img/sidebar/plan_active.png');
        }
        .i-org{
          background-image: url('../assets/img/sidebar/org_active.png');
        }
        .i-stats{
          background-image: url('../assets/img/sidebar/stats.png');
        }
        .i-audit{
          background-image: url('../assets/img/sidebar/audit_active.png');
        }
      }
    }
    .product-item-icon-box{
      width: 50px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      .icon{
        background-position: center;
        background-size: contain;
        display: block;
        margin: auto;
        margin-top: 12px;
      }
      .i-examinee{
        background-image: url('../assets/img/sidebar/examinee.png');
        width: 19px;
        height: 15px;
      }
      .i-document{
        background-image: url('../assets/img/sidebar/document.png');
        width: 16px;
        height: 14px;
      }
      .i-venue{
        background-image: url('../assets/img/sidebar/venue.png');
        width: 16px;
        height: 15px;
      }
      .i-arrangement{
        background-image: url('../assets/img/sidebar/arrangement.png');
        width: 14px;
        height: 16px;
      }
      .i-score{
        background-image: url('../assets/img/sidebar/score.png');
        width: 15px;
        height: 16px;
      }
      .i-video{
        background-image: url('../assets/img/sidebar/video.png');
        width: 15px;
        height: 16px;
      }
      .i-user{
        background-image: url('../assets/img/sidebar/user.png');
        width: 15px;
        height: 15px;
      }
      .i-teacher{
        background-image: url('../assets/img/sidebar/teacher.png');
        width: 14px;
        height: 16px;
      }
      .i-plan{
        background-image: url('../assets/img/sidebar/plan.png');
        width: 15px;
        height: 19px;
        margin-top: 8px;
      }
      .i-org{
        background-image: url('../assets/img/sidebar/org.png');
        width: 15px;
        height: 14px;
      }
      .i-stats{
        background-image: url('../assets/img/sidebar/stats.png');
        width: 15px;
        height: 14px;
      }
      .i-audit{
        background-image: url('../assets/img/sidebar/audit.png');
        width: 12px;
        height: 16px;
      }
    }
    .product-item-link{
      text-decoration: none;
    }
    .product-item-name{
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
      font-size: 14px;
      padding-right: 8px;
    }
    .product-item-more{
      width: 24px;
      height: 24px;
      position: absolute;
      left: 200px;
      top: 0;
    }
  }
  .sidebar-second{
    width: 180px;
    height: 100%;
    background:rgba(27,32,42,.9);
    position: absolute;
    left: -240px;
    top: 0;
    -webkit-transition: all .3s cubic-bezier(0,0,.2,1);
    transition: all .3s cubic-bezier(0,0,.2,1);
    z-index: 99;
    opacity: 0;
    &.ss-show{
      left: 240px;
      opacity: 1;
    }
  }
}
</style>
